<template>
    <div class="mine">
        <MineInfo class="mine-info"/>
        <HeadSection class="head-section" :title="'我的账户'"/>
        <div class="sub-section">
            <div class="sub-section-row">
                <ITView :title="'个人信息'"/>
                <ITView :title="'账户充值'"/>
                <ITView :title="'账户提现'"/>
            </div>
            <div class="sub-section-row">
                <ITView :title="'等级特权'"/>
                <ITView :title="'帮助中心'"/>
                <ITView :title="'联系客服'"/>
            </div>
        </div>
        <HeadSection class="head-section" :title="'我是主播'"/>
        <div class="sub-section">
            <div class="sub-section-row">
                <ITView :title="'直播设置'"/>
                <ITView :title="'我的圈子'"/>
                <ITView :title="'直播分享'"/>
            </div>
        </div>
        <HeadSection class="head-section" :title="'我是粉丝'"/>
        <div class="sub-section">
            <div class="sub-section-row">
                <ITView :title="'我的关注'"/>
                <ITView :title="'浏览记录'"/>
            </div>
        </div>
        <HeadSection class="head-section" :title="'意见反馈'"/>
    </div>
</template>

<style scoped>
    .mine {
        flex: 1;
        background-color: green;
    }
    .mine-info {
        /*background-color: orange;*/

    }
    .sub-section {

    }
    .sub-section-row {
        flex-direction: row;
        justify-content: space-between;
        margin-left: 50px;
        margin-right: 50px;

        /*样式调试代码*/
        border-width: 2px;
        border-style: solid;
        border-color: black;
    }
</style>

<script>
    import MineInfo from '../components/mine/MineInfo.vue'
    import HeadSection from '../components/mine/HeadSection.vue'
    import ITView from '../components/mine/ITView.vue'
    export default {
        components: { MineInfo, HeadSection, ITView },
    }
</script>
